<template>  
  <div>  
    <!-- 面包屑导航 -->  
    <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">  
      <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>  
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>  
      <el-breadcrumb-item>失物信息</el-breadcrumb-item>  
    </el-breadcrumb>  
    <!-- 卡片容器，用于展示失物信息 -->  
    <el-card style="margin: 15px; min-height: calc(100vh - 111px)">  
      <div>  
        <!-- 功能区 -->  
        <div style="margin: 10px 0">  
          <!-- 搜索区 -->  
          <div style="margin: 10px 0">  
            <!-- 名称搜索 -->  
            <span style="font-weight:700;">名称</span>  
            <el-input v-model="searchName" clearable placeholder="请输入失物名称" prefix-icon="el-icon-search" style="margin-left:5px;width: 150px" />  
            <!-- 地点搜索 -->  
            <span style="font-weight:700; margin-left:10px;">丢失地点</span>  
            <el-input v-model="searchPlace" clearable placeholder="请输入丢失地点" prefix-icon="el-icon-search" style="margin-left:5px;width:150px" />  
            <!-- 受理状态选择 -->  
            <span style="font-weight:700;margin-left:10px;">受理状态</span>  
            <el-select v-model="value" placeholder="请选择" style="width:150px; margin-left:5px;"> 
              
              
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  
            <el-button icon="el-icon-search" @click="load"
              style="background-color: #143371;margin-left:180px; color: aliceblue;">搜索</el-button>
            <el-button icon="el-icon-refresh-left" style="margin-left:10px;background-color: #143371; color: aliceblue;"
              @click="reset">重置</el-button>
              
              <download-excel style="display: inline;"
                class="export-excel-wrapper"
                :data="tableData"
                :fields="json_fields"
                type="xls"
                worksheet="My Worksheet"
                name="失物信息"
    >
      <el-button style="background-color: #143371; color: aliceblue;"
           >导出</el-button>
    </download-excel>
            <div style="float: right">

              <el-tooltip content="添加失物" placement="top">

                <el-button style="background-color: #143371; color: aliceblue;width: 40px;" icon="el-icon-plus"
                  @click="add"></el-button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <!--    表格-->
        <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="失物名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="失物状态">
                  <p>{{ props.row.status==1?"已受理":"未受理" }}</p>
                </el-form-item>
                <el-form-item label="失物拾取地点">
                  <span>{{ props.row.lostLocation }}</span>
                </el-form-item>
                <el-form-item label="被领取时间">
                  <span>{{ props.row.findTime }}</span>
                </el-form-item>
                <el-form-item label="待领取地点">
                  <span>{{ props.row.receivelLoction }}</span>
                </el-form-item>
                <el-form-item label="服务电话">
                  <span>{{ props.row.lostPhone }}</span>
                </el-form-item>
                <el-form-item label="被领取时间">
                  <span>{{ props.row.receiveTime }}</span>
                </el-form-item>
                
                <el-form-item label="领取人姓名">
                  <span>{{ props.row.receiveName }}</span>
                </el-form-item>
                <el-form-item label="领取人身份证号">
                  <span>{{ props.row.receiveIdcard }}</span>
                </el-form-item>
                <el-form-item label="实物图片">
                  <img :src="props.row.url" alt="" style="width: 180px; height: 150px;">
                </el-form-item>
                
                

              </el-form>
            </template>
          </el-table-column>


          <el-table-column label="#" type="index" fixed/>
          <el-table-column label="编号" prop="id" sortable width="100" />
          <el-table-column label="名称" prop="name" width="120px" />
          <el-table-column label="状态" width="150px" >
            <template slot-scope = "scope">
              {{ scope.row.status==1?"已受理":"未受理" }}
            </template>
          </el-table-column>
          <el-table-column label="捡取地点" prop="lostLocation" width="120px"  />
          <el-table-column label="捡取时间" prop="findTime" width="180px" />
          <el-table-column label="领取地点" prop="receiveLoction" width="120px" />
          <el-table-column label="服务电话" prop="lostPhone" sortable width="200px" />
          <el-table-column label="实物图片" prop="url" width="120px" >
            <template slot-scope="scope"><img :src="scope.row.url" alt="" style="width: 180px; height: 150px;"></template>
            </el-table-column>
          <el-table-column label="被领取时间" prop="receiveTime" width="120px" />
          <el-table-column label="被领取认姓名" prop="receiveName" width="120px" />
          <el-table-column label="被领取人身份证号" prop="receiveIdcard" width="220px" />
          <!--      操作栏-->
          <el-table-column label="操作" width="150px" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div style="margin: 10px 0">
          <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[10, 20]" :total="total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        <div>
          <!--      弹窗-->
          <el-dialog :visible.sync="dialogVisible" title="操作" width="50%" @close="cancel" top="30px">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">

              <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" style="width: 80%" placeholder="失物的名字"></el-input>
              </el-form-item>

            
              <el-form-item label="地址" prop="lostLocation">
                <el-input v-model="form.lostLocation" style="width: 80%" placeholder="拾取地址"></el-input>
              </el-form-item>

              <el-form-item label="状态(1已受理，0未受理)" prop="status">
                <el-input v-model.number="form.status" style="width: 80%" placeholder="失物状态"></el-input>
              </el-form-item>

              <el-form-item label="拾取时间" prop="findTime">
                <el-input v-model="form.findTime" style="width: 80%" placeholder="拾取到失物的时间"></el-input>
              </el-form-item>
              <el-form-item label="领取电话" prop="lostPhone">
                <el-input v-model="form.lostPhone" style="width: 80%" placeholder="领取失物的电话"></el-input>
              </el-form-item>
              <el-form-item label="领取地点" prop="receiveLoction">
                <el-input v-model="form.receiveLoction" style="width: 80%" placeholder="领取失物的地点"></el-input>
              </el-form-item>
              <el-form-item label="被领取时间" prop="receiveTime">
                <el-input v-model="form.receiveTime" style="width: 80%" placeholder="输入领取失物的电话"></el-input>
              </el-form-item>
              <el-form-item label="被领取人姓名" prop="receiveName">
                <el-input v-model="form.receiveName" style="width: 80%" placeholder="输入领取人的姓名"></el-input>
              </el-form-item>
              <el-form-item label="领取人身份证号" prop="receiveIdcard">
                <el-input v-model="form.receiveIdcard" style="width:80%" placeholder="输入领取人身份证号"></el-input>
              </el-form-item>
              <el-form-item label="失物图" prop="goodsPic">
                <el-upload action="" list-type="picture-card" :limit="1" :on-preview="handlePictureCoverPreview"
                  :on-remove="handleCoverRemove" accept=".jpg,.png" :on-exceed="handleExceed" :file-list="cover_list"
                  :http-request="UploadCover">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="CoverdialogVisible">
                  <img width="100%" :src="CoverdialogImageUrl" alt="">
                </el-dialog>

              </el-form-item>
              

            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: "SceneryInfo",
  data() {
    // 手机号验证
    const checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 100);
    };
//  ["失物ID", "失物名称", "失物状态","失物拾取地点","拾取时间","待领取地点","服务电话","实物图片","被领取时间","领取人姓名","领取人身份证号"];
// ["id", "name", "status","lostlocation","findtime","receiveloction","lostphone","url","receivetime","receivename","receiveidCard"];
    return {
      json_fields:{
        失物ID:'id',
        失物名称:'name',
        失物状态:'status',
        失物拾取地点:'lostlocation',
        拾取时间:"findtime",
        待领取地点:'receiveloction',
        服务电话:"lostphone",
        被领取时间:"receivetime",
        领取人姓名:"receivename",
        领取人身份证号:"receiveidCard"
      },
      loading: true,
      editJudge: true,
      judge: false,
      dialogVisible: false,
      searchName:"",
      searchPlace:"",
      currentPage: 1,
      pageSize: 10,
      cover_list: [],
      CoverdialogImageUrl: '',
      CoverdialogVisible: false,
      dialogloading: false,
      coverImageUrl:'',
      total: 0,

            options: [{
          value: 1,
          label: '已受理'
        }, {
          value: 0,
          label: '未受理'
        }, ],
        value: '',

      tableData: [
        {
          id:1,
          name:'雨伞',
          status:1,
          lostLocation:"南昌大学软件楼",
          findTime:"2023.12.3 18:12:00",
          receivelLoction:"南昌大学保卫处",
          lostPhone:"1111111",
          url:'',
          receiveTime:'2023.12.7 19:10:00',
          receiveName:'我是谁？',
          receiveIdcard:'361121200112112312',

        }
      ],
      form: {

        id:1,
          name:'雨伞',
          status:1,
          lostLocation:"南昌大学软件楼",
          findTime:"2023.12.3 18:12:00",
          receivelLoction:"南昌大学保卫处",
          lostPhone:"1111111",
          url:this.coverImageUrl,
          receiveTime:'2023.12.7 19:10:00',
          receiveName:'我是谁？',
          receiveIdcard:'361121200112112312',

      },
      rules: {
        name: [
          { required: true, message: "请输入失物名称", trigger: "blur" },
          { validator:function(rule,value,callback){
                          if(/^.+$/.test(value) == false){
                              callback(new Error("请输入内容"));
                          }else{
                              //校验通过
                              callback();
                          }
                        }, trigger: 'blur'}
        ],
        status: [
          { required: true, message: "请输入失物状态", trigger: "blur" },
          { validator:function(rule,value,callback){
                          if(/[0,1]{1}/.test(value) == false){
                              callback(new Error("请输入(0代表未受理，1代表未受理)"));
                          }else{
                              //校验通过
                              callback();
                          }
                        }, trigger: 'blur'}
        ],
        lostLocation: [{ required: true, message: "请输入拾取地点", trigger: "blur" },
        { validator:function(rule,value,callback){
                          if(/^.+$/.test(value) == false){
                              callback(new Error("请输入内容"));
                          }else{
                              //校验通过
                              callback();
                          }
                        }, trigger: 'blur'}],
        findTime: [{ required: true, message: "请输入拾取时间", trigger: "blur" },
        { validator:function(rule,value,callback){
                          if(/^.+$/.test(value) == false){
                              callback(new Error("请输入内容"));
                          }else{
                              //校验通过
                              callback();
                          }
                        }, trigger: 'blur'}],
        lostPhone: [{ required: true, trigger: "blur" }],
        receiveLoction: [{ required: true, message: "请输入领取地点", trigger: "blur" }],
      },
      editDisplay: {
        display: "block",
      },
      display: {
        display: "none",
      },
    };
  },
  created() {
    this.load();
    this.loading = true;
    setTimeout(() => {
      //设置延迟执行
      this.loading = false;
    }, 1000);
  },
  methods: {
    cancel() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
      this.cover_list=[]
      this.more_list=[]
      this.CoverdialogImageUrl=''
      this.MoredialogImageUrl=''
      this.coverImageUrl=''
      this.moreImageUrl=''
    },
    UploadCover(data){
      var formData = new FormData()
      formData.append('type','good')
      formData.append('file',data.file)
      this.dialogloading = true;
      console.log("图片文件",data)
      console.log("现在的图片",this.cover_list)
      request.post("/lost/upload",formData).then(res=>{
        if(res.code==='1'){
          this.cover_list = []
          this.coverImageUrl = res.data,
          this.cover_list.push({name:data.file.name,url:res.data})
          this.dialogloading = false;
        }else{
          this.dialogloading = false
          this.$message({
            type:'error',
            message:'上传失败'
          })
        }
      
      })

      
      
    },
    UploadMore(data){
      var formData = new FormData()
      formData.append('type','lost')
      formData.append('file',data.file)
      this.dialogloading = true;
      console.log("上传详细图片",data)
      console.log("现在的图片",this.moreImageUrl)
      request.post("/lost/upload",formData).then(res=>{
        if(res.code==='1'){
         // this.cover_list = []
         this.moreImageUrl.push(res.data)
         console.log("更多图片为：")
         console.log(this.moreImageUrl)
          this.more_list.push({name:data.file.name,url:res.data})
          this.dialogloading = false;
        }else{
          this.dialogloading = false
          this.$message({
            type:'error',
            message:'上传失败'
          })
        }
      
      })
    },
    handleRemove(file,fileList) {
      console.log("删除",file);
      this.more_list = this.more_list.filter(item=>{
        return item.name!=file.name
      })
    },
    handleCoverRemove(file,fileList){
      console.log("删除",file);
      this.cover_list = []
    },
    handlePictureCoverPreview(file){
      this.CoverdialogImageUrl = file.url;
      this.CoverdialogVisible = true;
    },
    handlePictureCardPreview(file) {
      this.MoredialogImageUrl = file.url
      this.MoredialogVisible = true
    },

    handleExceed(){
      this.$message.warning(`只允许上传一张图片`);
    },
    handleNineExceed(){
      this.$message.warning(`只允许上传9张图片`);
    },
    async load() {
      request.get("/lost/lostlist", {
            params: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                searchName: this.searchName,
                searchPlace:this.searchPlace
            },
        }).then((res) => {
            console.log(res);
            this.tableData = res.data.lostList;
            this.total = res.data.total;
            this.loading = false;
        });
    },
    reset() {
      this.search = ''
      request.get("/lost/reset", {
          params: {
              pageNum: 1,
              pageSize: this.pageSize,
          },
      }).then((res) => {
          console.log(res);
          this.tableData = res.data.lostList;
          this.total = res.data.total;
          this.loading = false;
      });
    },
    handleDelete(index, row) {
      // 确认框确认是否要删除
      this.$confirm("确定要删除" + row.stuName + "的信息吗?", "删除提示", {
        iconClass: "el-icon-question", //自定义图标样式
        confirmButtonText: "残忍删除", //确认按钮文字
        cancelButtonText: "取消删除", //取消按钮文字
        showClose: true, //是否显示右上角关闭按钮
        type: "warning", //提示类型  success/info/warning/error
      }).then(() => {  //选择确认按钮进入此方法
        request.delete("/lost/delete" + row.id).then(res => {
          console.log(row.id)
          if (res.code === "1") {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.load()
          }
          else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }).catch(() => { //选择取消按钮进入此方法
        //取消操作
        alert('取消')
      });
    },
    handleEdit(index, row) {
      this.judge = true;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        this.form = JSON.parse(JSON.stringify(row));
        this.cover_list.push({name:"lost",url:this.form.url})
        this.editDisplay = { display: "block" };
      });
    },
    save() {
      this.$refs.form.validate(vaild => {
        if (vaild) {
          if (this.judge) {
            //先表单验证，再放put请求
            this.form.url = this.coverImageUrl
            request.put("/lost/update", this.form).then(res => {
              if (res.code === "1") {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
                this.search = "",
                  this.load();
                this.dialogVisible = false
              }
              else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
              }
            })


          }
          else {
            //发post请求
            console.log(1)
            this.form.url = this.coverImageUrl
            request.post("/lost/add", this.form).then(res => {
              if (res.code === "1") {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
                this.search = "",
                  this.load();
                this.dialogVisible = false
              }
              else {
                this.$message({
                  type: 'error',
                  message: res.msg
                })
              }
            })
          }
        }
      })


    },
    // export2Excel() {
    //   require.ensure([], () => {
    //     const { export_json_to_excel } = require("@/excel/Export2Excel");
    //     const fieldName = ["失物ID", "失物名称", "失物状态","失物拾取地点","拾取时间","待领取地点","服务电话","实物图片","被领取时间","领取人姓名","领取人身份证号"];
    //     const filterVal = ["id", "name", "status","lostlocation","findtime","receiveloction","lostphone","url","receivetime","receivename","receiveidCard"];
    //     const data = this.tableData.map(v => filterVal.map(j => v[j]));
    //     export_json_to_excel(fieldName, data, "失物列表");
    //   });
    // },
  
    add() {
      this.dialogVisible = true;
      this.judge = false;
      this.form = {}
    },
    handleSizeChange(pageSize) {
      //改变每页个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变页码
      this.currentPage = pageNum;
      this.load();
    },

  }


}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
  display: block;
}
.el-upload-list__item {
  transition: none !important;
}
</style>